<template>
  <div class="home">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3">
      <div class="btn_go" @click="login"></div>
      <div class="btn_rule" @click="popshow = true"></div>
    </div>
    <div class="pop" v-show="popshow">
      <div class="pop_con">
        <div class="swiper-container txt">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <p>
                <em>1</em
                >参与比亚迪汽车“国货当红，感恩有你，比亚迪新春红包等你翻”活动，扫二维码进入活动页面即可抽奖，领取随机现金红包。
              </p>
              <p>
                <em>2</em
                >抽中的红包24小时内达到账号余额，红包数量有限，先到先得！同一个手机号视为同一个用户，相应奖品归属于首次参加活动的账号。
              </p>
              <p>
                <em>3</em
                >活动范围为上海、浙江、江苏、安徽、福建地区，活动时间为即日起至2021年2月7日。
              </p>
              <p>
                <em>4</em
                >您的个人资料有可能会提交至比亚迪汽车的授权经销商或太平洋汽车网客服，与您进一步沟通试驾、购车等事宜。
              </p>
              <p><em>5</em>活动详情可拨打平台电话 021-34239900进行咨询。</p>
              <p>
                <em>6</em
                >活动期间，如存在违规行为（包括但不限于恶意套取资金、机器作弊、虚假交易等违反诚实信用原则行为），主办方将取消您的使用资格，并有权撤销相关违规交易和奖励，必要时追究法律责任。
              </p>
              <p>以下情况造成红包无法正常派发，主办方不承担相关责任：</p>
              <p>1.收款方用户状态不正常</p>
              <p>2.根据监管部门的要求，需要收款用户补充身份信息才能继续操作</p>
              <p>3.收款方未完善身份信息或未开立余额账户，无法收款</p>
              <p>4.不支持的收款用户类型</p>
            </div>
          </div>
          <div class="swiper-scrollbar"></div>
        </div>

        <div class="btn_close" @click="popshow = false"></div>
      </div>
    </div>

    <div class="pop_not" v-show="not">
      <div class="pop_con">
        <div class="btn_close" @click="goOther"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "home",
  metaInfo: {
    title: "一汽-大众_太平洋汽车网",
    meta: [
      {
        name: "Author",
        content: "wangzhian_gz liuyamin_bj",
      },
      {
        name: "address",
        content: "zt/project/2020/202012/20201212-daz",
      },
    ],
  },

  data() {
    return {
      loading: {}, //加载中
      popshow: false,
      isarea: -1, // -1:获取不到定位；0：不在活动地区；1：在
      not: false,
    };
  },

  methods: {
    login() {
      // 返回该页面后再次点击参与按钮 且 有活动地区限制
      if (window.AlipayJSBridge && this.isarea !== 1 && this.$CONF.areaArr.length !== 0) {
        this.isArea(-1);
        return;
      }

      const shareId = this.$TOOL.getSearchData().shareId || "",
        loginUrl = `https://pangku.com/alilogin?atid=${this.$CONF.atid}&callback=`,
        parms = `shareId=${shareId}&type=1`,
        callback =
          `${loginUrl}` +
          encodeURIComponent(`${this.$CONF.baseUrl}ali/oauthAli_callback.jsp?${parms}`),
        url = `${loginUrl}${callback}`;
      location.href = url;
    },

    isArea(flag) {
      if (this.$CONF.areaArr.length === 0) return;
      // 如果活动不需要限制地区以下js终止执行
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });
      this.$TOOL
        .location()
        .then((res) => {
          this.loading.clear();

          let locationArr = [],
            isHave = false;
          locationArr.push(this.$TOOL.formatArea(res.pro));
          locationArr.push(this.$TOOL.formatArea(res.city));
          locationArr.map((item) => {
            this.$CONF.areaArr.indexOf(item) > -1 && (isHave = true);
          });
          if (isHave) {
            this.isarea = 1;
            flag === -1 && this.login();
          } else {
            this.isarea = 0;
            // this.$toast({
            //   message: "抱歉，您不在活动地区",
            //   onClose: () => {
            //     this.goOther();
            //   },
            // });
            this.not = true; // 弹出不在活动区弹窗
          }
        })
        .catch((msg) => {
          this.loading.clear();
          // 未开启定位
          this.$toast({
            message: msg.message,
            onClose: () => {
              // this.goOther();
            },
          });
        });
    },

    // 不在活动地区处理
    goOther() {
      this.not = false;
      AlipayJSBridge.call("pushWindow", {
        url: this.$CONF.other,
      });
    },

    setScroll() {
      new Swiper(".swiper-container", {
        direction: "vertical",
        freeMode: true, // 抵抗反弹
        mousewheel: true,
        observer: true, // 要加
        observeParents: true, // 要加
        slidesPerView: "auto", // 'auto'则自动根据slides的宽度来设定
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
  },

  mounted() {
    console.log(`是否需要活动地区限制:${this.$CONF.areaArr.length > 0}`);
    this.setScroll();
    // 是支付宝才进行定位处理
    if (window.AlipayJSBridge) {
      this.isArea();
    }
  },
};
</script>

<style lang="scss">
.home {
  .home_1 {
    height: 5.26rem;
    background: url(../assets/images/home_1.jpg) no-repeat center top / cover;
  }
  .home_2 {
    height: 4.74rem;
    background: url(../assets/images/home_2.jpg) no-repeat center top / cover;
    margin-top: -1px;
  }
  .home_3 {
    height: 5.08rem;
    background: url(../assets/images/home_3.jpg) no-repeat center top / cover;
    position: relative;
    margin-top: -1px;
    .btn_go {
      width: 5rem;
      height: 0.96rem;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
    .btn_rule {
      width: 1.41rem;
      height: 0.35rem;
      position: absolute;
      left: 50%;
      top: 1.45rem;
      transform: translateX(-50%);
      background: url(../assets/images/btn_rule.png) no-repeat center top / contain;
    }
  }
  .pop {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: scroll;
    &::before {
      width: 100%;
      height: 15rem;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background: rgba(0, 0, 0, 0.8);
    }
    .pop_con {
      width: 7.5rem;
      height: 10.88rem;
      background: url(../assets/images/pop_rule.png) no-repeat center top / contain;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      .btn_close {
        width: 0.88rem;
        height: 0.88rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .txt {
        width: 5.3rem;
        height: 6.66rem;
        padding: 0 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        top: 1rem;
        left: 1.3rem;
        font-size: 0.24rem;
        line-height: 1.68;
        text-align: justify;
        p {
          position: relative;
          margin-bottom: 0.06rem;
          em {
            display: block;
            width: 0.28rem;
            height: 0.28rem;
            line-height: 0.27rem;
            background: #d02945;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 0.06rem;
            left: -0.36rem;
          }
        }
        .swiper-slide {
          height: auto;
        }
        .swiper-scrollbar {
          opacity: 1;
          width: 1px;
          background: rgba(0, 0, 0, 1);
          .swiper-scrollbar-drag {
            width: 0.06rem;
            left: -1px;
            border-radius: 0.03rem;
            background: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
  .pop_not {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: scroll;
    &::before {
      width: 100%;
      height: 15rem;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background: rgba(0, 0, 0, 0.8);
    }
    .pop_con {
      width: 7.5rem;
      height: 6.33rem;
      background: url(../assets/images/not.png) no-repeat center top / contain;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      .btn_close {
        width: 0.88rem;
        height: 0.88rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
